<template>
	<view>
		<u-navbar height="50" back-icon-color="#333" title="意见反馈" title-color="#333" title-size="36"></u-navbar>
		<view class="line"></view>
		<view class="tipsTitle">如果您对平台不满意，请提交上传反馈建议，平台核实后会针对进行优化调整，您的满意是我们前进的动力！</view>
		<view class="line"></view>
		<view class="layoutView">
			<text class="layoutTitle">请选择您在使用过程中遇到的问题</text>
			<view class="itemView">
				<text v-for="(item,index) in itemList" :key="index" :class="index==itemIndex?'itemTitle':'itemTitle2'"
					@click="onItem(index)">{{item.name}}</text>
			</view>
			<view class="inputView">
				<text class="inputTitle">问题和意见（必填）</text>
				<text class="inputNum">0/200</text>
			</view>
			<textarea class="inputData" placeholder="请填写10字以上的问题描述，以便我们更好的帮助您解决问题，提高服务质量。"
				v-model="describe"></textarea>
			<view class="inputView" style="margin: 20rpx 0px;">
				<text class="inputTitle">图片（选填限3张）</text>
				<text class="inputNum">0/3</text>
			</view>
			<u-upload ref="uUpload" :action="action" :custom-btn="true" :show-progress="false" max-count="3"
				 @on-change="onUpload" @on-remove="onRemove">
				<u-icon slot="addBtn" name="/static/img/upload.png" size="200"></u-icon>
			</u-upload>
			<text class="inputTitle" style="margin-top: 20rpx;">联系方式（必填）</text>
			<input class="inputData2" placeholder="请填写您的微信或者手机号码" v-model="contactInfo" />
		</view>
		<view class="postView" @click="onPost()">提交</view>
	</view>
</template>

<script>
	import { toast, toastC } from '../../utils/common';
import { feedbackType,feedback} from '@/api/index.js'
	export default {
		data() {
			return {
				action: 'https://kcjiuye.cn/api/public/images/upload',
				itemIndex: -1,
				itemList: [],
				typeId: '',
				describe: '',
				contactInfo: '',
				imageList: [],
			}
		},
		onLoad() {
			this.initData();
		},
		methods: {
			initData() {
				let self = this;
				feedbackType().then(res => {
					self.itemList = res.data;
				});
			},
			onItem(index) {
				this.itemIndex = index;
				this.typeId = this.itemList[index].id;
			},
			onUpload(res) {
				if (res.statusCode == 200) {
					let json = JSON.parse(res.data);
					this.imageList.push(json.data);
				}
			},
			onRemove(index) {
				this.imageList.splice(index, 1);
			},
			onPost() {
				let self = this;
				if (!this.typeId) {
					toast('请选择问题类型');
					return
				}
				if (!this.describe) {
					toast('请输入问题描述');
					return
				}
				if (!this.contactInfo) {
					toast('请填写您的联系方式');
					return
				}
				feedback({
					images: this.imageList,
					type_id: this.typeId,
					advice: this.describe,
					contact_phone: this.contactInfo
				}, true).then(res => {
					toastC('反馈成功');
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						});
					}, 500)
				});
			}
		}
	}
</script>

<style>
	.line {
		height: 20rpx;
		background: #F2F2F2;
	}
	
	.tipsTitle {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		background: #fff;
		padding: 20rpx;
	}
	
	.layoutView {
		display: flex;
		flex-direction: column;
		background: #fff;
		padding: 40rpx 20rpx;
	}
	
	.layoutTitle {
		font-size: 30rpx;
		font-weight: 400;
		color: #313233;
	}
	
	.itemView {
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;
	}
	
	.itemTitle {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #41B952;
		height: 56rpx;
		background: #DEFFE2;
		border-radius: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
	}
	
	.itemTitle2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #333333;
		height: 56rpx;
		background: #EBEBEB;
		border-radius: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
	}
	
	.inputView {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.inputTitle {
		flex: 1;
		font-size: 30rpx;
		color: #313233;
	}
	
	.inputNum {
		font-size: 24rpx;
		color: #999999;
	}
	
	.inputData {
		width: calc(100% - 40rpx);
		height: 200rpx;
		border: 1px solid #E6E6E6;
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 30rpx 20rpx;
		font-size: 28rpx;
	}
	
	.inputData2 {
		width: calc(100% - 40rpx);
		border: 1px solid #E6E6E6;
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 20rpx;
		font-size: 28rpx;
	}
	
	.postView {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		background: #F6632D;
		border-radius: 40rpx;
		color: #fff;
		margin: 60rpx 20rpx;
	}
	

	page {
		background: #F2F2F2;
	}
</style>
